<template>
    <div class="entrance_box">
    <div class="entrance h100">
        <transition name="entrance" :translate="{}" >
        <login-vue v-if="this.page=='login'"></login-vue>
        <register-vue v-else></register-vue>
        </transition>
        <ul class="button">
            <li class="btn" v-on:click="switchs('login')">登录</li>
            <li class="btn" @click="switchs('register')">注册</li>
            <li class="btn">服务</li>
        </ul>
    </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import login from '../assets/views/entrance/login'
    import register from '../assets/views/entrance/register'
    import '../assets/js/entrance/entrance'
    export default {
        name: "entrance",
        components:{
            loginVue:login,
            registerVue:register
        },
        data(){
            return{
                page:'login'
            }
        },
        methods:{
            switchs:function (v) {
                this.page=v;
                if ($('.entrance_box').height()>document.body.clientHeight){
                    $('.entrance').addClass('h100')
                    $('.module').addClass('h100')
                }else{
                    $('.entrance').removeClass('h100')
                    $('.module').removeClass('h100')
                }
            }

        }
    }
</script>

<style>
    @import "../assets/css/entrance.css";
</style>
<style scoped>
    .entrance-leave-active{
        transition:transform .5s;
        position: absolute;

    }
    .entrance-enter-active{
        transition:transform 1s
    }
    .entrance-leave-to{
        transform: rotateY(180deg);
        opacity: 0;
        position: absolute;

    }
    .entrance-enter-to{
        transform: rotateY(360deg);
    }
</style>